<template>
  <div class="searchForm">
    <el-form ref="SearchRef" :inline="true" :model="form" label-width="auto" status-icon>
      <template v-for="(item, index) in formData" :key="index">
        <el-form-item
          :prop="item.prop"
          size="large"
          v-if="item.type === 'input' && item.searchShow"
        >
          <el-input v-model="form[item.prop]" :placeholder="item.placeholder" />
        </el-form-item>
        <el-form-item
          :prop="item.prop"
          size="large"
          v-else-if="item.type === 'cascader' && item.searchShow"
        >
          <el-cascader
            v-model="form[item.prop]"
            :options="item.options"
            :props="item.props"
            :placeholder="item.placeholder"
            :style="{ width: item.width }"
          />
        </el-form-item>
        <el-form-item
          :prop="item.prop"
          size="large"
          v-else-if="item.type === 'threeSelect' && item.searchShow"
        >
          <el-tree-select
            v-model="form[item.prop]"
            :data="item.options"
            :node-key="item.nodeKey"
            :render-after-expand="false"
            :placeholder="item.placeholder"
            :style="{ width: item.width }"
            :props="item.props"
            :check-strictly="true"
          />
        </el-form-item>
        <el-form-item
          :prop="item.prop"
          size="large"
          v-else-if="item.type === 'number' && item.searchShow"
        >
          <el-input type="number" v-model="form[item.prop]" :placeholder="item.placeholder" />
        </el-form-item>
        <el-form-item
          :prop="item.prop"
          size="large"
          v-else-if="(item.type === 'switch' && item.searchShow) || (item.type === 'select' && item.searchShow)"
          style="width: 200px"
        >
          <el-select v-model="form[item.prop]" :placeholder="item.placeholder" size="large">
            <el-option
              v-for="option in item.searchOption"
              :key="option.value"
              :label="option.label"
              :value="option.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          :prop="item.prop"
          size="large"
          v-else-if="item.type === 'datetimerange' && item.searchShow"
        >
          <el-date-picker
            v-model="form[item.prop]"
            type="datetimerange"
            range-separator="至"
            value-format="YYYY-MM-DD HH:mm:ss"
            :start-placeholder="item.placeholder[0]"
            :end-placeholder="item.placeholder[1]"
          />
        </el-form-item>
      </template>
      <el-form-item>
        <el-button type="primary" color="#626aef" round @click="submitForm(SearchRef)"
          >提交</el-button
        >
        <el-button type="info" round @click="resetForm(SearchRef)">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup name="Form">
const props = defineProps({
  formData: { type: Array, default: [] },
});
const SearchRef = ref();
const form = ref({});
// searchSubmit 提交后触发
const emit = defineEmits(["searchSubmit"]);
const { proxy } = getCurrentInstance();
const submitForm = async (formEl) => {
  if (!formEl) return;
  emit("searchSubmit", form.value);
};

const resetForm = (formEl) => {
  if (!formEl) return;
  emit("searchSubmit",{});
  formEl.resetFields();
};
</script>

<style lang="scss">
.searchForm {
  background: var(--box-back-color);
  box-shadow: var(--dark-shadow-001ad4);
  border-radius: 8px;
  padding: 10px 10px;
  margin-bottom: 20px;
  &_title {
    font-size: 24px;
    font-weight: bold;
    margin: 0 10px;
  }
  .el-form--inline .el-form-item {
    margin: 10px 10px;
  }
  .el-button.is-round {
    flex-shrink: 0;
    border-radius: 20px;
    padding: 20px 0px;
    width: 90px;
    font-size: 16px;
  }
}
</style>
